<template>
	<div class="content-box">
		<div class="card examClass-box">
			<h4 class="examClass-title">考试类别</h4>
			<div style="display: flex; justify-content: space-between; margin: 10px 0">
				<el-button type="primary" size="small" :icon="CirclePlus" @click="handleAddEditClass('新增类别')">新增</el-button>
				<el-button type="primary" size="small" :icon="EditPen" @click="handleAddEditClass('修改类别')">修改</el-button>
				<el-button type="danger" size="small" :icon="Delete" @click="handleDeleteClass">删除</el-button>
			</div>
			<el-scrollbar style="height: 90%">
				<div
					v-for="item in examClassList"
					:key="item.id"
					:class="['examClass-item', item.id == selectClassId ? 'examClass-selectItem' : '']"
					@click="handleClickClass(item)"
				>
					{{ item.subjectName }}
				</div>
			</el-scrollbar>
		</div>
		<ProTable
			ref="subjectProTable"
			:columns="columns"
			title="科目列表"
			row-key="id"
			:request-api="getExamClassesApi"
			:init-param="initTableParam"
			:request-auto="false"
		>
			<!-- 表格header按钮 -->
			<template #tableHeader="scope">
				<el-button type="primary" :icon="CirclePlus" @click="openSubjectDialog('新增科目', {})">新增科目</el-button>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="View" @click="openSubjectDialog('查看科目', scope.row)">查看</el-button>
				<el-button type="primary" link :icon="EditPen" @click="openSubjectDialog('修改科目', scope.row)">编辑</el-button>
				<el-button type="danger" link :icon="Delete" @click="deleteSubject(scope.row)">删除</el-button>
			</template>
		</ProTable>
		<!-- 新增/修改考试类别弹窗 -->
		<el-dialog v-model="classVisible" :title="classDialogTitle" :destroy-on-close="true" width="30%" draggable>
			<el-form label-width="100px" ref="classFormRef" label-suffix=" :" :model="classFormModel">
				<el-form-item
					label="考试类别"
					prop="subjectName"
					:rules="[
						{
							required: true,
							message: '请填写考试类别',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="classFormModel.subjectName" placeholder="请输入考试类别" clearable maxlength="200"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="classVisible = false">取消</el-button>
					<el-button type="primary" @click="handleSubmitClass">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 科目弹窗 -->
		<el-dialog v-model="subjectVisible" :title="subjectTitle" :destroy-on-close="true" width="30%" draggable>
			<el-form
				label-width="100px"
				ref="subjectFormRef"
				label-suffix=" :"
				:model="subjectFormModel"
				:disabled="subjectTitle == '查看科目'"
			>
				<el-form-item label="考试类别">{{ subjectFormModel.subjectParentName }}</el-form-item>
				<el-form-item
					label="科目名称"
					prop="subjectName"
					:rules="[
						{
							required: true,
							message: '请填写科目名称',
							trigger: 'blur'
						}
					]"
				>
					<el-input v-model="subjectFormModel.subjectName" placeholder="请输入科目名称" clearable maxlength="200"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="subjectVisible = false">{{ subjectTitle == "查看科目" ? "关闭" : "取消" }}</el-button>
					<el-button type="primary" @click="handleSubmitSubject" v-if="subjectTitle != '查看科目'">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="subject">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { getAllExamClassApi, addExamClassApi, getExamClassesApi, deleteExamClassApi } from "@/api/modules/test/exam";
import { onMounted, reactive, ref } from "vue";
import { FormInstance } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";

const subjectProTable = ref();

// 表格配置项
const columns: ColumnProps[] = [
	{
		type: "index",
		label: "序号",
		width: 80
	},
	{
		prop: "subjectName",
		label: "科目名称"
	},
	{
		prop: "operation",
		label: "操作",
		width: 330
	}
];

const examClassList = ref<any>([]);
const initTableParam = reactive({ id: "" });

// 选中的id和name
const selectClassId = ref("");
const selectClassName = ref("");

const classVisible = ref(false);
const classDialogTitle = ref("新增类别");
const classFormRef = ref<FormInstance>();
const classFormModel = ref({
	id: "",
	subjectName: ""
});

const subjectVisible = ref(false);
const subjectTitle = ref("");
const subjectFormRef = ref<FormInstance>();
const subjectFormModel = ref({
	subjectParentId: "",
	subjectParentName: "", // 父级树name
	id: "",
	subjectName: ""
});

// 选中考试类别
const handleClickClass = (item: any) => {
	selectClassId.value = item.id;
	selectClassName.value = item.subjectName;

	initTableParam.id = item.id;
};

// 新增/修改考试类别
const handleAddEditClass = (title: string) => {
	classDialogTitle.value = title;
	classVisible.value = true;

	if (title == "新增类别") {
		classFormModel.value.id = "";
		classFormModel.value.subjectName = "";
	} else {
		classFormModel.value.id = selectClassId.value;
		classFormModel.value.subjectName = selectClassName.value;
	}
};

// 删除考试类别
const handleDeleteClass = async () => {
	await useHandleData(deleteExamClassApi, { id: selectClassId.value }, "删除考试类别");
	const { result } = await getAllExamClassApi();
	examClassList.value = result as any;
};

// 考试类别提交
const handleSubmitClass = () => {
	classFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			await addExamClassApi({ ...classFormModel.value });
			classVisible.value = false;
			const { result } = await getAllExamClassApi();
			examClassList.value = result as any;
		} catch (err) {
			console.log(err);
		}
	});
};

const openSubjectDialog = (title: string, row: any) => {
	subjectTitle.value = title;
	subjectVisible.value = true;

	subjectFormModel.value.subjectParentId = selectClassId.value;
	subjectFormModel.value.subjectParentName = selectClassName.value;

	if (title == "新增科目") {
		subjectFormModel.value.id = "";
		subjectFormModel.value.subjectName = "";
	} else {
		subjectFormModel.value.id = row.id;
		subjectFormModel.value.subjectName = row.subjectName;
	}
};

const deleteSubject = async (row: any) => {
	await useHandleData(deleteExamClassApi, { id: row.id }, "删除科目");
	subjectProTable.value.getTableList();
};

const handleSubmitSubject = () => {
	subjectFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			await addExamClassApi({ ...subjectFormModel.value });
			subjectVisible.value = false;
			subjectProTable.value.getTableList();
		} catch (err) {
			console.log(err);
		}
	});
};

onMounted(async () => {
	const { result } = await getAllExamClassApi();
	examClassList.value = result as any;
	// 默认数据第一个为选中状态
	selectClassId.value = examClassList.value.length > 0 && examClassList.value[0].id;
	selectClassName.value = examClassList.value.length > 0 && examClassList.value[0].subjectName;
	initTableParam.id = selectClassId.value;
});
</script>
<style lang="scss" scoped>
.content-box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;

	.content-table {
		flex: 1;
		height: 100%;
	}

	.examClass-box {
		width: 270px;
		height: 100%;
		margin-right: 10px;
		padding: 18px;

		.examClass-title {
			margin: 0 0 15px;
			font-size: 18px;
			font-weight: bold;
			color: var(--el-color-info-dark-2);
			letter-spacing: 0.5px;
		}

		.examClass-item {
			width: 100%;
			height: 35px;
			line-height: 35px;
			color: #666;
			font-size: 14px;
			padding: 0 10px;
			box-sizing: border-box;
			margin-bottom: 10px;
			background-color: #f5f5f5;
			border-radius: 5px;
			cursor: pointer;
		}

		.examClass-selectItem {
			color: #fff;
			background-color: var(--el-color-primary);
		}
	}
}
</style>